
import React from 'react';
import { Switch, Form, Button, Input, InputNumber, Space, Badge, Card, Select, message, Modal } from 'antd';
import { connect } from 'umi';
import G2LineBsc from '../Charts/G2LineBsc';
import { ExclamationCircleOutlined } from '@ant-design/icons';

const { confirm } = Modal;
class ServiceConfig extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
            enabled: false,
            record: {},
        };
    }
    formRef = React.createRef<any>();
    componentDidMount() {
        const record = this.props.model;
        this.setState({ record, enabled: record && record.id > 0 });
        this.formRef.current.setFieldsValue({ model: record });
    }
    onFinish = (values: any) => {
        this.setState({ loading: true });
        var act = "Abp/update";
        if (values.model.id == 0 || !values.model.id) {
            act = "Abp/create";
        }
        this.props.dispatch({
            type: act,
            payload: values.model,
            control: 'PayService',
        }).then(() => {
            var resp = this.props.response;
            if (resp.success) {
                message.success('保存成功！');
                this.props.refreshData();
            }
            else {
                message.error('保存错误，请联系管理员！');
            }
            this.setState({ loading: false });
        });
    }
    onClose = () => {
        this.props.closeDraw();
    };
    confirmDel = (id: number) => {
        let _this = this;
        confirm({
            icon: <ExclamationCircleOutlined />,
            content: "确定删除实例？此操作将不可挽回！",
            onOk() {
                _this.onDelete(id);
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }
    onDelete = (id: number) => {
        this.setState({ loading2: true });
        this.props.dispatch({
            type: "Abp/delete",
            payload: { id },
            control: 'PayService',
        }).then(() => {
            var resp = this.props.response;
            if (resp.success) {
                message.success('删除成功！');
                this.props.refreshData();
                this.props.closeDraw();
            }
            this.setState({ loading2: false });
        });
    };
    render() {
        return (
            <div>
                <Form
                    layout='horizontal'
                    ref={this.formRef} onFinish={this.onFinish}
                >
                    <Form.Item style={{ marginBottom: "0px" }}>
                        <Input.Group compact>
                            <Form.Item label="实例名" name={['model', 'serviceName']} rules={[{ required: true, message: "请输入服务器名" }]}>
                                <Input placeholder="请输入服务器名" />
                            </Form.Item>
                            <Form.Item label="所属区域" name={['model', 'areas']}>
                                <Select placeholder="华东" style={{ width: 200 }}>
                                    <Select.Option value="华东">华东</Select.Option>
                                    <Select.Option value="华南">华南</Select.Option>
                                    <Select.Option value="华北">华北</Select.Option>
                                    <Select.Option value="新加坡">新加坡</Select.Option>
                                    <Select.Option value="美国">美国</Select.Option>
                                </Select>
                            </Form.Item>
                        </Input.Group>
                    </Form.Item>
                    <Form.Item style={{ marginBottom: "0px" }}>
                        <Input.Group compact>
                            <Form.Item
                                label="实例IP"
                                name={['model', 'ip']}
                                rules={[{ required: true, message: "请输入IP地址" }]}>
                                <Input placeholder="请输入IP地址" />
                            </Form.Item>
                            <Form.Item label="端口" name={['model', 'port']} rules={[{ required: true, message: "请输入开通端口" }]}>
                                <InputNumber placeholder="端口" style={{ width: 200 }} />
                            </Form.Item>
                        </Input.Group>
                    </Form.Item>
                    <Form.Item name={['model', 'whiteList']} label="白名单">
                        <Input.TextArea />
                    </Form.Item>
                    <Form.Item name={['model', 'blackList']} label="黑名单">
                        <Input.TextArea />
                    </Form.Item>
                    <Form.Item label="是否启用" name={['model', 'isEnable']} valuePropName="checked">
                        <Switch />
                    </Form.Item>
                    <Form.Item name={['model', 'id']} style={{ display: 'none' }}>
                        <Input />
                    </Form.Item>
                    <Form.Item>
                        <Space>
                            <Button type="primary" htmlType="submit" loading={this.state.loading}>保存</Button>
                            <Button onClick={this.onClose}>取消</Button>
                            <Button
                                type="primary"
                                danger
                                style={{ marginLeft: 350 }}
                                onClick={() => this.confirmDel(this.state.record?.id)}
                                loading={this.state.loading2} disabled={!this.state.enabled}>删除实例</Button>
                        </Space>
                    </Form.Item>
                </Form>
                <Card size="small" title="运行状况" extra={<Badge status='processing' text='运行正常' />}><G2LineBsc /></Card>

            </div>
        );
    }
}
export default connect(({ Abp }: API.IConnectState) => ({
    response: Abp.response,
}))(ServiceConfig);